<template>
	<div id="container">
		<chartTitle :title="title"></chartTitle>
		<div class="main" :id="id">

		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
	export default {
    components: {
      chartTitle
    },
		name: 'chart-line-shadow',
		props: {
			title: String,
			shadow: {
				type: Boolean,
				default: true
			},
			color: {
				type: Array,
				default: () => {
					return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
				}
			},
      data: {
        type: Array,
        default: () => {
        	return []
        }
      }
		},
		computed: {
			id: function() {
				return `main-${Math.random()}`
			},
      chartData: function() {
        const obj = {
          xAxisData: [],
          seriesData: []
        }
        this.data.map(item => {
          obj.xAxisData.push(item.name)
          obj.seriesData.push(item.value)
        })
        return obj
      }
		},
		mounted() {
		  setTimeout(() => {
		    this.onInit()
		  }, 3500)
		},
		updated() {
		  setTimeout(() => {
		    this.onInit()
		  }, 1000)
		},
		methods: {
			onInit() {
				var chartDom = document.getElementById(this.id);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
					tooltip: {
						trigger: 'axis'
					},
					color: this.color,
					legend: {
						show: false
					},
					grid: {
            top: 25,
						left: 18,
						right: 21,
						bottom: 21,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						// boundaryGap: false,
						data: this.chartData.xAxisData,
						axisLabel: {
							color: '#fff'
						},
						axisLine: {
							lineStyle: {
								color: '#306269'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(48, 98, 105, .2)'
							}
						}
					},
					series: [
            {
							name: this.title,
							type: 'line',
							stack: 'Total',
							showSymbol: false,
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#00CBFF' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							data: this.chartData.seriesData
						}
					]
				};

				option && myChart.setOption(option, true);
				window.addEventListener('resize', () => {
					this.$nextTick(() => {
						myChart.resize()
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }

  #container {
    width: 100%;
    height: 27.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main {
      flex: 1;
    }
  }
</style>
